<template>
    <div class="inspiration-page">
        <div v-if="activeTag === 'list'">
            <!-- 顶部热点来源卡片 -->
            <section class="hot-sources">
                <div v-for="source in sources" :key="source.key" :class="['source-card', source.key]">
                    <div class="source-header">
                        <span class="dot" :style="{ background: source.color }"></span>
                        <h3>{{ source.title }}</h3>
                    </div>
                    <div class="ticker">
                        <ul class="ticker-list" :style="tickerStyle">
                            <el-dropdown v-for="(item, idx) in source.items" :key="source.key + '-' + idx"
                                trigger="hover" placement="bottom-start">
                                <li class="ticker-item" :title="item">{{ item }}</li>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="changeCZ(item, 'AI文案创作')">AI文案创作</el-dropdown-item>
                                        <el-dropdown-item @click="changeCZ(item, '观点提炼')">观点提炼</el-dropdown-item>
                                        <el-dropdown-item @click="changeCZ(item, '情感创作')">情感创作</el-dropdown-item>
                                        <el-dropdown-item @click="changeCZ(item, '故事创作')">故事创作</el-dropdown-item>
                                        <el-dropdown-item @click="changeCZ(item, '视频脚本创作')">视频脚本创作</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <!-- 克隆一份以实现无缝轮播 -->

                            <el-dropdown v-for="(item, idx) in source.items" :key="source.key + '-dup-' + idx"
                                trigger="hover" placement="bottom-start">
                                <li class="ticker-item" :title="item">{{ item }}</li>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="changeCZ(item, 'AI文案创作')">AI文案创作</el-dropdown-item>
                                        <el-dropdown-item @click="changeCZ(item, '观点提炼')">观点提炼</el-dropdown-item>
                                        <el-dropdown-item @click="changeCZ(item, '情感创作')">情感创作</el-dropdown-item>
                                        <el-dropdown-item @click="changeCZ(item, '故事创作')">故事创作</el-dropdown-item>
                                        <el-dropdown-item @click="changeCZ(item, '视频脚本创作')">视频脚本创作</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </ul>
                    </div>
                </div>
            </section>

            <!-- 热点视频 -->
            <section class="hot-videos">
                <div class="section-head">
                    <h2>热点视频</h2>
                    <!-- <div class="filters">
                    <button class="chip" v-for="tag in tags" :key="tag" @click="activeTag = tag"
                        :class="{ active: activeTag === tag }">{{ tag }}</button>
                </div> -->
                </div>

                <div class="video-grid">
                    <div v-for="(v, i) in videos" :key="i" class="video-card">
                        <div class="thumb">
                            <img :src="v.cover" :alt="v.title" />
                            <!-- <span class="badge" :class="platformClass(v.publisher)">{{ v.publisher }}</span> -->
                            <span class="badge" :class="'xhs'">{{ v.publisher }}</span>
                        </div>
                        <div class="meta">
                            <div class="title" :title="v.title">{{ v.title }}</div>
                            <div class="actions">
                                <button class="btn ghost">点赞 {{ v.zan }}</button>
                                <button class="btn primary" @click="toCheck(v)">查看</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <div v-else class="ai-content-creation">
            <!-- 返回按钮 -->
            <div class="back-button-container">
                <button class="back-btn" @click="activeTag = 'list'">
                    <svg class="back-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M19 12H5m7-7l-7 7 7 7" />
                    </svg>
                    <span>返回</span>
                </button>
            </div>

            <div class="creation-container">
                <!-- 主标题区域 -->
                <div class="header-section">
                    <div class="title-wrapper">
                        <div class="ai-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                            </svg>
                        </div>
                        <h1 class="creation-title">文案要求补充</h1>
                    </div>
                    <div class="tech-decoration">
                        <div class="tech-line"></div>
                        <div class="tech-dots">
                            <span></span><span></span><span></span>
                        </div>
                    </div>
                </div>

                <!-- 信息卡片区域 -->
                <div class="info-cards">
                    <div class="info-card selected-card">
                        <div class="card-header">
                            <div class="card-icon selected-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <span class="card-label">所选功能</span>
                        </div>
                        <div class="card-value">{{ creationType }}</div>
                    </div>

                    <div class="info-card type-card">
                        <div class="card-header">
                            <div class="card-icon type-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                                </svg>
                            </div>
                            <span class="card-label">内容类型</span>
                        </div>
                        <div class="card-value">{{ creationTitle }}</div>
                    </div>
                </div>

                <!-- 输入区域 -->
                <div class="input-section">
                    <div class="input-header">
                        <h3>详细需求描述</h3>
                        <div class="input-decoration"></div>
                    </div>
                    <div class="input-wrapper">
                        <el-input v-model="contentRequirement" type="textarea" :rows="6"
                            placeholder="请详细描述您的需求内容和要求，AI将根据您提供的信息生成相应的文案..." class="requirement-input" />
                        <div class="input-glow"></div>
                    </div>
                </div>

                <!-- 操作按钮区域 -->
                <div class="action-section">
                    <button class="generate-btn" @click="generateContent">
                        <div class="btn-content">
                            <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                            <span>开始生成</span>
                        </div>
                        <div class="btn-glow"></div>
                    </button>
                </div>
            </div>

            <!-- 背景装饰 -->
            <div class="bg-decoration">
                <div class="floating-shapes">
                    <div class="shape shape-1"></div>
                    <div class="shape shape-2"></div>
                    <div class="shape shape-3"></div>
                </div>
                <div class="grid-pattern"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'

import { getHotDy, getHotTt, videoList,czTypeTag} from '@/api/inspiration'

type Source = {
    key: string
    title: string
    color: string
    items: string[]
}

type VideoItem = Partial<{
    url: string
    link: string
    video_url: string
    jump_url: string
    href: string
}> & Record<string, any>

const toCheck = (item: VideoItem) => {
    const url = item.url || item.link || item.video_url || item.jump_url || item.href
    if (!url) {
        ElMessage.warning('未找到视频链接')
        return
    }
    window.open(url as string, '_blank')
}

const getHotDyList = async () => {
    let res = await getHotDy()
    console.log(res, '11111111');
    if (res) {
        const douyinSource = sources.value.find(s => s.key === 'douyin')
        if (douyinSource) {
            douyinSource.items = res
        }
    }
}

const getHotTtList = async () => {
    let res = await getHotTt()
    if (res) {
        const douyinSource = sources.value.find(s => s.key === 'toutiao')
        if (douyinSource) {
            douyinSource.items = res
        }
    }
}

const getVideoList = async () => {
    let res = await videoList()
    if (res) {
        videos.value = res
    }
}

const czType = ref([])

const getCzType = async () => {
    let res = await czTypeTag()
    console.log(res, 111111111111111111);
    if (res) {
        czType.value = res
    }
}

getCzType()

getHotDyList()
getHotTtList()
getVideoList()


const sources = ref<Source[]>([
    {
        key: 'douyin', title: '抖音热点', color: '#FF176B', items: [
            '汽车神操作：停得像教科书',
            '新能源续航真实测评',
            '夏季自驾出游路线推荐',
            '油价波动如何省钱用车',
            '车机系统好用度排行',
        ]
    },
    {
        key: 'toutiao', title: '今日头条热点', color: '#FF2B2B', items: [
            '城市限行最新政策速览',
            '国产SUV销量榜更新',
            '保值率报告：哪些车更抗跌',
            '智能辅助驾驶体验分享',
            '二手车交易避坑指南',
        ]
    },
    {
        key: 'kuaishou', title: '快手热点', color: '#FA6400', items: [
            '自驾露营装备清单',
            '洗车打蜡省钱技巧',
            '十万级家用车推荐',
            '夏季胎压到底打多少',
            '车内除味有效方法',
        ]
    },
    {
        key: '360', title: '360热搜', color: '#0EA5E9', items: [
            '台风出行安全提醒',
            '高速事故应急处理流程',
            '违章新规详解',
            '汽车保养周期对照表',
            '新手停车技巧合集',
        ]
    },
    {
        key: 'xiaohongshu', title: '小红书热点', color: '#FF2442', items: [
            '夏日公路旅行穿搭',
            '车内收纳美学灵感',
            '露营摄影构图参考',
            '城市周末短途路线',
            '出片机位分享',
        ]
    },
    {
        key: 'baidu', title: '百度热点', color: '#2563EB', items: [
            '混动与纯电怎么选',
            '车险到期怎么买更划算',
            '暴雨涉水理赔要点',
            '新手选车避坑清单',
            '轮胎花纹与抓地力科普',
        ]

    },
])

const tickerStyle = {
    '--row-height': '28px',
    '--duration': '14s',
} as Record<string, string>

const activeTag = ref<string>('list')



type Video = { title: string; cover: string; publisher: string; zan: number; tag: string }

const videos = ref<Video[]>([
    { title: '用一个碗做头盔？安全驾驶别学', cover: 'https://picsum.photos/seed/car1/400/260', publisher: '抖音', zan: 2.3, tag: '生活' },
    { title: '夜景霓虹街拍，城市自驾Vlog', cover: 'https://picsum.photos/seed/car2/400/260', publisher: '小红书', zan: 5.1, tag: '旅行' },
    { title: '保养前后油耗对比测试', cover: 'https://picsum.photos/seed/car3/400/260', publisher: '头条', zan: 1.8, tag: '评测' },
    { title: '雨夜行车注意事项合集', cover: 'https://picsum.photos/seed/car4/400/260', publisher: '快手', zan: 3.6, tag: '汽车' },
    { title: '周末郊游露营准备什么', cover: 'https://picsum.photos/seed/car5/400/260', publisher: '360', zan: 4.2, tag: '旅行' },
    { title: '新能源补能实测之旅', cover: 'https://picsum.photos/seed/car6/400/260', publisher: '百度', zan: 6.7, tag: '评测' },
    { title: '车内收纳大变身', cover: 'https://picsum.photos/seed/car8/400/260', publisher: '小红书', zan: 3.2, tag: '生活' },
    { title: '保值率TOP榜车型点评', cover: 'https://picsum.photos/seed/car9/400/260', publisher: '头条', zan: 7.4, tag: '汽车' }
])



const platformClass = (platform: string) => {
    const map: Record<string, string> = {
        '抖音': 'qihu',
        '头条': 'tt',
        '快手': 'ks',
        '小红书': 'xhs',
        '百度': 'bd',
        '360': 'qihu'
    }
    return map[platform] || ''
}

const changeCZ = (item: string, type: string) => {
    console.log(item, type)
    activeTag.value = 'add'
    creationType.value = type
    creationTitle.value = item
}

// 在现有的ref变量后添加
const contentRequirement = ref('')

// 添加生成内容的方法
const generateContent = () => {
    if (!contentRequirement.value.trim()) {
        // 这里可以添加提示用户输入内容的逻辑
        console.log('请输入内容要求')
        return
    }
    // 这里添加生成文案的逻辑
    console.log('生成文案:', contentRequirement.value)
}

const creationType = ref('')

const creationTitle = ref('')

</script>

<style scoped lang="scss">
:root {
    --bg: #f7f8fb;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #6b7280;
    --border: #e5e7eb;
    --primary: #2563eb;
    --radius: 16px;
    --shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    --ring: 0 0 0 6px rgba(37, 99, 235, 0.08);
    --grad-1: linear-gradient(180deg, #ffffff, #f7f9ff);
    --grad-2: linear-gradient(135deg, #eef2ff, #ffffff);
}

.inspiration-page {
    color: var(--text);
    /* background: linear-gradient(180deg, #f7f8fb, #f7f9ff 40%, #f6f7fb); */
    min-height: 100%;
    max-width: none;
    margin: 0;
}

/* 顶部热点来源 */
.hot-sources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    background: linear-gradient(180deg, #ffffff, #f9fbff);
    border: 1px solid #e6ebf5;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.06);
}

@media (min-width: 1440px) {
    .hot-sources {
        gap: 18px;
    }
}

.source-card {
    background: linear-gradient(180deg, #ffffff, #f7f9ff);
    border: 1px solid #e5e9f6;
    border-radius: 5px;
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.05);
    padding: 14px 14px 8px 14px;
    display: flex;
    flex-direction: column;
    min-height: 230px;
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* 顶部色条：不同来源不同色，提升识别度 */
.source-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background: linear-gradient(90deg, #eef2ff, #f7f9ff);
}

.source-card.douyin::before {
    background: linear-gradient(90deg, #ffbfd4, #ffdeea);
}

.source-card.toutiao::before {
    background: linear-gradient(90deg, #fad5d5, #ffe3e3);
}

.source-card.kuaishou::before {
    background: linear-gradient(90deg, #ffe4c1, #fae0c1);
}

.source-card[class*='360']::before {
    background: linear-gradient(90deg, #c5e0ff, #9cbff8);
}

.source-card.xiaohongshu::before {
    background: linear-gradient(90deg, #f8c5d0, #ffbccc);
}

.source-card.baidu::before {
    background: linear-gradient(90deg, #b3d4fa, #d0e2ff);
}

.source-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 200px at 50% -10%, rgba(99, 102, 241, .05), transparent);
    pointer-events: none;
    z-index: -1;
}

.source-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.08);
    border-color: #e9efff;
}

.source-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.source-header h3 {
    font-size: 18px;
    margin: 0;
    font-weight: 800;
    color: #111827;
    letter-spacing: .2px;
}

.source-card.douyin .source-header h3 {
    color: #111827;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .02);
}

.ticker {
    position: relative;
    overflow: hidden;
    height: 160px;
}

.ticker-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    animation: ticker-move var(--duration) linear infinite;
}

/* 悬停卡片或滚动区域时暂停滚动 */
.source-card:hover .ticker-list,
.ticker:hover .ticker-list {
    animation-play-state: paused;
}

.ticker-item {
    height: var(--row-height);
    line-height: var(--row-height);
    font-size: 16px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    padding-left: 16px;
}

.ticker-item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: calc(50% - 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c7d2fe;
}

.source-card.douyin .ticker-item::before {
    background: #ff9ac0;
}

@keyframes ticker-move {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(-1 * var(--row-height) * 5));
    }
}

/* 视频区域 */
/* 统一与顶部模块的容器风格 */
.hot-videos {
    margin-top: 15px;
    background: linear-gradient(180deg, #ffffff, #f9fbff);
    border: 1px solid #e6ebf5;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.06);
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.section-head h2 {
    font-size: 18px;
    margin: 0;
    color: #0b1220;
    font-weight: 800;
}

.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chip {
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #e5e9f6;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font-size: 13px;
    transition: all .2s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.chip:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.chip.active {
    background: #eaf1ff;
    color: var(--primary);
    border-color: #c7d2fe;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .12);
}

/* 与上方容器一致的边距内布局 */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

@media (min-width: 1080px) {
    .video-grid {
        gap: 14px;
    }
}

@media (min-width: 1600px) {
    .video-grid {
        gap: 16px;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

.video-card {
    background: linear-gradient(180deg, #ffffff, #f7f9ff);
    border: 1px solid #e5e9f6;
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
    border-color: #dbe3ff;
}

.thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #f3f6ff;
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-size: 12px;
    background: rgba(37, 99, 235, .88);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .22);
}

.badge.dy {
    background: linear-gradient(135deg, #ff176b, #ff5d9f);
    box-shadow: 0 4px 10px rgba(255, 23, 107, .22);
}

.badge.tt {
    background: linear-gradient(135deg, #ff2b2b, #ff6b6b);
    box-shadow: 0 4px 10px rgba(255, 43, 43, .22);
}

.badge.ks {
    background: linear-gradient(135deg, #fa6400, #ff8a33);
    box-shadow: 0 4px 10px rgba(250, 100, 0, .22);
}

.badge.xhs {
    background: linear-gradient(135deg, #ff2442, #ff6d7a);
    box-shadow: 0 4px 10px rgba(255, 36, 66, .22);
}

.badge.bd {
    background: linear-gradient(135deg, #2563eb, #5b8eff);
    box-shadow: 0 4px 10px rgba(37, 99, 235, .22);
}

.badge.qihu {
    background: linear-gradient(135deg, #0ea5e9, #5ad0ff);
    box-shadow: 0 4px 10px rgba(14, 165, 233, .22);
}

.meta {
    padding: 10px 12px 12px;
    display: grid;
    gap: 10px;
}

.title {
    font-size: 14px;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.actions {
    display: flex;
    gap: 10px;
}

.btn {
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #e5e9f6;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    transition: all .2s ease;
    box-shadow: 0 2px 8px rgba(2, 6, 23, .04);
}

.btn.ghost:hover {
    background: #f8fafc;
    transform: translateY(-1px);
}

.btn.primary {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 6px 14px rgba(37, 99, 235, .22);
}

.btn.primary:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(37, 99, 235, .28);
}



/* AI文案创作页面样式 - 优化高度版本 */
.ai-content-creation {
    position: relative;
    min-height: 90vh;
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%);
    overflow: hidden;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

/* 返回按钮 */
.back-button-container {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 100;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.back-icon {
    width: 16px;
    height: 16px;
}

/* 主容器 - 减少顶部边距 */
.creation-container {
    max-width: 800px;
    margin: 60px auto 0;
    position: relative;
    z-index: 10;
}

/* 标题区域 - 减少间距 */
.header-section {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
}

.title-wrapper {
    margin-bottom: 15px;
}

.ai-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    animation: float 3s ease-in-out infinite;
}

.ai-icon svg {
    width: 26px;
    height: 26px;
    color: white;
}

.creation-title {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.creation-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-weight: 400;
}

.tech-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.tech-line {
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #667eea, transparent);
    animation: pulse 2s ease-in-out infinite;
}

.tech-dots {
    display: flex;
    gap: 6px;
}

.tech-dots span {
    width: 6px;
    height: 6px;
    background: #667eea;
    border-radius: 50%;
    animation: blink 1.5s ease-in-out infinite;
}

.tech-dots span:nth-child(2) {
    animation-delay: 0.3s;
}

.tech-dots span:nth-child(3) {
    animation-delay: 0.6s;
}

/* 信息卡片 - 减少间距 */
.info-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.info-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.info-card:hover::before {
    opacity: 1;
}

.info-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.card-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selected-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.type-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.card-icon svg {
    width: 12px;
    height: 12px;
    color: white;
}

.card-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.card-value {
    font-size: 15px;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.3;
}

/* 输入区域 - 减少间距 */
.input-section {
    margin-bottom: 25px;
}

.input-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.input-header h3 {
    font-size: 18px;
    color: #ffffff;
    margin: 0;
    font-weight: 600;
}

.input-decoration {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #667eea, transparent);
}

.input-wrapper {
    position: relative;
}

.requirement-input {
    width: 100%;
}

.requirement-input :deep(.el-textarea__inner) {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    padding: 16px !important;
    resize: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2) !important;
}

.requirement-input :deep(.el-textarea__inner):focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px;
}

.requirement-input :deep(.el-textarea__inner)::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.input-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 18px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.requirement-input:focus-within+.input-glow {
    opacity: 0.3;
}

/* 操作按钮 - 减少尺寸 */
.action-section {
    text-align: center;
}

.generate-btn {
    position: relative;
    padding: 12px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
    overflow: hidden;
}

.generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.6);
}

.generate-btn:active {
    transform: translateY(-1px);
}

.btn-content {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.btn-icon {
    width: 18px;
    height: 18px;
}

.btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.generate-btn:hover .btn-glow {
    left: 100%;
}

/* 背景装饰 */
.bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.shape-3 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

.grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-move 20s linear infinite;
}

/* 动画 */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

@keyframes grid-move {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 50px);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .creation-container {
        margin-top: 50px;
        padding: 0 10px;
    }

    .info-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .creation-title {
        font-size: 24px;
    }

    .back-btn {
        padding: 8px 14px;
        font-size: 12px;
    }

    .generate-btn {
        padding: 10px 28px;
        font-size: 14px;
    }

    .header-section {
        margin-bottom: 20px;
    }

    .info-cards {
        margin-bottom: 20px;
    }

    .input-section {
        margin-bottom: 20px;
    }
}
</style>